<template>
	<div class="container">
		<el-card class="card-box">
			<h2 style="margin: 20px 0;">{{infoData.name}}</h2>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" >
                <el-row>
                    <el-col :span='12'>
                        <el-form-item label="果园产量" prop="prodNum" style="width: 320px;">
                            <el-input size="small" type="number" v-model="ruleForm.prodNum" placeholder="请输入果园产量">
                                <template slot="append">万吨</template>
                            </el-input>
                        </el-form-item>
                        <el-form-item label="果园产值" prop="prodVal" style="width: 320px;">
                            <el-input size="small" type="number" v-model="ruleForm.prodVal" placeholder="请输入果园产值">
                                <template slot="append">亿元</template>
                            </el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span='12'>
                        <el-form-item label="果园经纬度" style="width: 400px;">
                            <el-card class="card-box">
                                <el-form-item label="经度:" style="width: 300px;" prop="coordinate.lat" >
                                    <el-input style="width: 140px;" size="small" type="number" v-model="ruleForm.coordinate.lat" placeholder="请输入经度" />
                                </el-form-item>
                                <el-form-item label="纬度:" style="width: 300px;" prop="coordinate.lng" >
                                    <el-input style="width: 140px;" size="small" type="number" v-model="ruleForm.coordinate.lng" placeholder="请输入纬度" />
                                </el-form-item>
                            </el-card>
                        </el-form-item>
                    </el-col>
                </el-row>
				<el-row>
                    <el-col :span='24'>
                        <el-form-item label="果园链接" prop="url">
                            <el-input size="small" type="textarea" autosize v-model="ruleForm.url" placeholder="请输入果园产值" />
                        </el-form-item>
                    </el-col>
                </el-row>
				<el-form-item>
					<el-button @click="submitForm('ruleForm')" type="success" size="small">保存</el-button>
					<el-button @click="$router.go(-1)" type="warning" size="small" plain>返回</el-button>
				</el-form-item>
			</el-form>
		</el-card>
	</div>
</template>

<script>
import {
	goverment_check,
	saveComp
} from "@/request/supervisionCenterApi.js"
export default {
	data() {
		return {
			rules: {
				prodNum: [{ required: true, message: '不能为空', trigger: 'blur' }],
				prodVal: [{ required: true, message: '不能为空', trigger: 'blur' }],
				url: [{ required: true, message: '不能为空', trigger: 'blur' }],
				'coordinate.lat': [{ required: true, message: '不能为空', trigger: 'blur' }],
				'coordinate.lng': [{ required: true, message: '不能为空', trigger: 'blur' }]
			},
			ruleForm: {
				prodNum: "",
				prodVal: "",
				coordinate: {
					lat: "",
					lng: ""
				},
				url: ""
			},
			infoData: {}

		}
	},
	mounted() {
		this.id = this.$route.query.id
		this.init()
	},
	methods: {
		// 返回上一页
		backPage() {
			this.$router.go(-1)
		},
		async init() {
			let res = await goverment_check(this.id)
			console.log(res)
			if (res.code != 200) return
			this.infoData = res.data
			if (res.data.fruitProd) {
				this.ruleForm = JSON.parse(res.data.fruitProd)
				if(this.ruleForm.coordinate==null){
					this.ruleForm.coordinate={
					lat: "",
					lng: ""
				}
				}
			}
		},

		// 提交
		submitForm(formName) {
			this.$refs[formName].validate(async (valid) => {
				if (valid) {
					this.infoData['fruitProd'] = JSON.stringify(this.ruleForm)
					console.log(this.infoData)
					let res = await saveComp(this.infoData)
					console.log(res)
					if (res.code != 200) return this.$message.error(res.msg)
					this.$message.success('编辑成功！')
					this.$router.go(-1)
				} else {
					console.log('error submit!!');
					return false;
				}
			});
		},
	}
}
</script>

<style>
.demo-ruleForm{
	width: 100%;
	padding: 30px 0;
}
</style>
